Before going ahead and making a multilingual website I would advise you to think about a few things:
\nThe first two points really matter only if you are making a personal project. If you were contracted to make a multilingual site for someone else then they are the ones who need to think about it.
\nI was recently hired to make a multilingual website with at least three different language options and point #3 was something I had to think about for a bit. Here is how I solved it with Gatsby and React, and maybe it can ispire you to make a similar solution for your own project.
\nThere is a very handy Gatsby plugin for setting up different multilingual pages called gatsby-plugin-i18n. It basically works by looking at your page files’ names and assigning a route to them based on a pattern.
\nLet’s say you have a page called contact.js which has a path that looks like this: src/pages/about.js . To add different language versions of that page you need to change the file name by adding the language code to it.
\nFor example, changing the file path to src/pages/about.en.js will change the final page url from yourwebsite.com/about to yourwebsite.com/en/about . Now to add the same page for a different language, let’s say German, you would make another file with a path like this: src/pages/about.de.js, which would make the final url look like this: yourwebsite.com/de/about .
\nAs you can already tell, this is pretty useful, and easy to setup. Of course - the plugin doesn’t actually translate the page content. It “just” automatically sets up all of your page routing based on your page names, which is really neat.
\nTo install the plugin you can run
\nnpm install gatsby-plugin-i18nor
\nyarn add gatsby-plugin-i18nFor the most basic setup you will need to edit your gatsby-config.js file and add this to it:
\nplugins: [\n {\n resolve: \"gatsby-plugin-i18n\",\n options: {\n langKeyDefault: \"en\",\n useLangKeyLayout: false,\n },\n },\n]You can fine-tune your settings by editing the options object. I went with these settings in the end, but you can find all possible options on the plugin’s repo page and play around with them.
\nplugins: [\n {\n resolve: `gatsby-plugin-i18n`,\n options: {\n langKeyDefault: \"en\",\n langKeyForNull: \"en\", // Sets language key to \"en\" if it's not provided prefixDefault: false, // Removes url prefix for your default language useLangKeyLayout: false,\n },\n },\n]The only thing left is to actually add your pages and fill them with your multilingual content.
\nIf you aren’t using Gatsby to build your website there are pure React or even pure JavaScript solutions to your problem. Actually, if you are using pretty much anything else you can head over to i18next and check out their list of supported frameworks with full documentation and examples.
\nOur pages our now configured, but we don’t heave an easy way of moving between them. In the next article we will go over the process of making a simple React component for selecting your preferred language, so you don’t have to manually enter your page address if you want to switch to a different language.
\nWe will cover a simpler solution for running a bilingual website and also a bit more complex one that supports more than two languages.
\nI also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.